<div class="modal fade" id="myCart" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     data-backdrop="static">
    <div class="modal-dialog" style="width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-toggle="modal" data-dismiss="modal"><span
                        aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h2 class="modal-title" id="myModalLabel" style="width:80%;"><i class="fa fa-shopping-cart"></i> Cart</h2>
            </div>
            <div class="modal-body" style="padding:0;min-height:400px;">
                <div id="cart-loader" class="col-md-12" style="padding-top: 40px;">
                    <div class="col-md-4"></div>
                    <div class="col-md-4" style="text-align: center">
                        <div id="floatingCirclesG" style="display: inline-block; ">
                            <div class="f_circleG" id="frotateG_01">
                            </div>
                            <div class="f_circleG" id="frotateG_02">
                            </div>
                            <div class="f_circleG" id="frotateG_03">
                            </div>
                            <div class="f_circleG" id="frotateG_04">
                            </div>
                            <div class="f_circleG" id="frotateG_05">
                            </div>
                            <div class="f_circleG" id="frotateG_06">
                            </div>
                            <div class="f_circleG" id="frotateG_07">
                            </div>
                            <div class="f_circleG" id="frotateG_08">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4"></div>
                </div>
                <div id="cart-message" class="col-md-12" style="text-align: center;display:none;padding-top: 40px;">

                </div>
                <div id="cart-user-register" class="col-md-12" style="text-align: center;display:none;padding-top: 40px;padding-left: 20%;padding-right: 20%;">
                    <form id="registerform-placeorder">
                        <div class="form-group">
                            <input type="text" class="form-control" id="business-name" name="business-name"
                                   placeholder="Agency/Business name" data-validation="required"
                                   data-validation-error-msg="Please enter Agency / Business name.">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="first-name" name="first-name"
                                   placeholder="First name" data-validation="required"
                                   data-validation-error-msg="Please enter your first name.">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="last-name" name="last-name"
                                   placeholder="Last name" data-validation="required"
                                   data-validation-error-msg="Please enter your last name.">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="phone" name="phone" placeholder="Phone"
                                   data-validation="number"
                                   data-validation-error-msg="Please enter valid phone number">
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control" id="email" name="email" placeholder="Email"
                                   data-validation="email"
                                   data-validation-error-msg="Please enter valid email">
                        </div>
                        <div class="form-group">
                            <button id="order-register-account-btn" type="submit"
                                    class="btn btn-primary ladda-button" data-style="slide-right">
                                Place Order
                            </button>
                        </div>
                    </form>
                </div>
                <div id="cart-table-container" class="table-responsive" style="display:none;">
                    <table id="cart-table" class="cart_table table table-hover" style="margin-bottom:0px !important;">
                        <thead style="text-align:center;">
                        <tr>
                            <th>Product code</th>
                            <th>Unit Price</th>
                            <th>Discount</th>
                            <th>Quantity</th>
                            <th>SubTotal</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody id="cart-item-template" style="display:none;">
                        <tr>
                            <td>
                                <img class="img-responsive alignleft cart-product-img" width="65" alt="">
                                <span class="cart_title cart-product-name"></span>
                            </td>
                            <td><a href="#" class="price cart-product-price"></a></td>
                            <td><a href="#" class="price cart-product-discount"></a></td>
                            <td><a href="#" class="price cart-product-qty"></a>
<!--                                <input type="text" class="form-control cart-product-qty" style="width:100px"
                                       placeholder="Quantity">-->
                            </td>
                            <td><a href="#" class="price2 cart-product-subtotal" style="color:black;font-size:14px;"></a></td>
                            <td><a class="remove remove-cart-item" title="Remove this item"></a></td>
                        </tr>
                        </tbody>
                    </table>
                    <hr style="margin-top: 0px; !important;"/>
                    <div class="row">
                        <div class="col-md-12" style="text-align: right;padding-right:50px;">
                            <div style="font-size:15px;"><span>Actual Total : </span><i class="fa fa-rupee"></i> &nbsp;<span id="cart-total"></span></div>
                            <div style="font-size:15px;"><span>Discount: </span><i class="fa fa-rupee"></i> &nbsp;<span id="cart-discount"></span></div>
                            <div style="font-size:15px;"><span>Total: </span><i class="fa fa-rupee"></i> &nbsp;<span id="cart-estimated-total"></span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="footer-action-btn" class="modal-footer" style="text-align: center;">
                <button class="btn btn-primary" data-toggle="modal" data-dismiss="modal"> Continue
                    Shopping
                </button>
                <button id="place-order" class="btn btn-primary" disabled="disabled"><i class="fa fa-share-square-o "></i> Place Order</button>

            </div>
            <div>
                <?php if(count($terms) > 0){ ?>
                <h4 style="text-align: center">Terms and Conditions</h4>
                <div style="padding-left: 50px;padding-right: 50px;">
                    <?php echo $terms[0]->getDescription(); ?>
                </div>
                <?php } ?>
            </div>
        </div>
    </div>
</div>

